<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">投资管理</el-breadcrumb-item>
      <el-breadcrumb-item>投资记录</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 搜索 -->
      <el-form ref="investFormRef" :model="investForm" label-width="120px">
        <el-row>
          <el-col :lg="8" :md="12" :sm="12" :xs="24">
            <el-form-item label="车辆类型" prop="models">
              <el-select
                v-model="investForm.models"
                placeholder="请选择车辆类型"
                style="width: 100%;"
              >
                <el-option
                  v-for="(item, index) in carModel"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :sm="12" :xs="24">
            <el-form-item label="出资人">
              <el-input
                v-model="investForm.name"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :sm="12" :xs="24">
            <el-form-item label="出资人电话">
              <el-input
                v-model="investForm.telephone"
                placeholder="请输入电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: right;">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格 -->
      <el-table
        :data="investData"
        border
        :header-cell-style="{ 'text-align': 'center' }"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="50"
        ></el-table-column>
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop ? item.prop : undefined"
          :label="item.label"
          align="center"
          :width="item.width"
        >
          <template slot-scope="scope">
            <div v-if="item.type === 'role'">
              {{ scope.row[item.prop] | role }}
            </div>
            <div v-if="item.type === 'date'">
              {{ scope.row[item.prop] | timeFilter }}
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button @click="seeClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button
              disabled
              @click="seeClick(scope.row)"
              type="text"
              size="small"
              >同意资金流入</el-button
            >
            <el-button @click="delClick(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
const tableColumn = [
  { label: "出资车辆类型", prop: "models", type: "text" },
  { label: "出资人", prop: "name", type: "text" },
  { label: "出资人电话", prop: "telephone", type: "text" },
  { label: "出资金额", prop: "cash", type: "text" },
  { label: "投资时间", width: 200, prop: "createTime", type: "date" }
];
export default {
  data() {
    return {
      investForm: {},
      investData: [],
      currentPage: 5,
      total: 0,
      pageSize: 5,
      pageNum: 1,
      tableColumn
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    ...mapState(["carModel"])
  },
  methods: {
    getList() {
      this.investForm.pageSize = this.pageSize;
      this.investForm.pageNum = this.pageNum;
      this.$api
        .get("/api/invest/list", { params: this.investForm })
        .then(res => {
          this.investData = res.data.data.records;
          this.total = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取列表失败");
        });
    },
    search() {
      this.pageNum = 1;
      this.getList();
    },
    reset() {
      this.pageNum = 1;
      this.investForm = {};
      this.getList();
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getList();
    },
    addClick() {
      this.$router.push({ name: "useradd" });
    },
    seeClick(row) {
      this.$router.push({ name: "userdetail", params: { id: row._id } });
    },
    delClick(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api
            .delete(`/api/invest/delete/${row._id}`)
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.pageNum = 1;
              this.getList();
            })
            .catch(err => {
              this.$message({
                type: "error",
                message: "删除失败"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>

